<template>
    <div class="y-flexbox" :class="direction == 'vertical' ? 'y-flexbox-vertical' : 'y-flexbox-horizontal'">
        <slot></slot>
    </div>
</template>

<script type="text/babel">
    export default {
        name: 'y-flexbox',
        props: {
            direction: {
                validator(value) {
                    return ['horizontal', 'vertical'].indexOf(value) > -1;
                },
                default: 'horizontal'
            }
        }
    }
</script>

<style lang="less">
    @import '../../../styles/components/flexbox.less';
</style>
